<template>
  <div class="container">
    <!-- TODO NavBar -->
    <van-nav-bar title="模型爱好者商城" fixed placeholder>
      <template #left>
        <img src="/assets/images/logo2.png" alt="" style="width: 5.625rem;">
      </template>
      <template #right>
        <i class="fa fa-bars" aria-hidden="true" style="font-size: 1.5625rem; color: cornflowerblue;"
          @click="handleRightShow"></i>
      </template>
    </van-nav-bar>

    <!-- TODO Search -->
    <van-sticky :offset-top="44">
      <van-search shape="round" placeholder="请输入搜索关键词" input-align="center" @focus="toSearch" />
    </van-sticky>

    <!-- TODO swiper -->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>

    <!-- TODO 类别 -->
    <div class="lqgwBox">
      <ul class="lqgwBox_items">
        <li v-for="item in typeList" :key="item.id">
          <router-link :to="{
            name: 'SearchList', params: {
              id: item.id
            }
          }"><img :alt="item.name" :src="item.cover_cdn" />
            <p>{{ item.name }}</p>
          </router-link>
        </li>
        <li>
          <router-link to="/product/base/index"><img alt="更多" src="/assets/images/type.png" />
            <p>更多</p>
          </router-link>
        </li>
      </ul>
    </div>

    <van-tabs v-model:active="active" animated sticky offset-top="6.125rem">
      <van-tab>
        <template #title>
          <van-icon name="new-arrival-o" color="#7232dd" size="1.2rem" style="margin-right: 5px;" />新品 • 单品
        </template>
        <ul class="proul">
          <li v-for="item in newProducts" :key="item.id">
            <div class="con">
              <router-link :to="{ path: '/product/base/detail', query: { id: item.id } }">
                <img :src="item.cover_cdn" />
                <p class="p1">
                  <van-tag color="#7232dd">{{ item.flag_text }}</van-tag> {{ item.name }}
                </p>
                <p class="p2"><span>￥</span>{{ item.price }}</p>
              </router-link>
            </div>
          </li>
        </ul>
      </van-tab>

      <van-tab>
        <template #title>
          <van-icon name="thumb-circle-o" color="#1989fa" size="1.2rem" style="margin-right: 5px;" />推荐 • 单品
        </template>
        <ul class="proul">
          <li v-for="item in tuiProducts" :key="item.id">
            <div class="con">
              <router-link :to="{ path: '/product/base/detail', query: { id: item.id } }">
                <img :src="item.cover_cdn" />
                <p class="p1">
                  <van-tag type="primary">{{ item.flag_text }}</van-tag> {{ item.name }}
                </p>
                <p class="p2" style="color: red"><span>￥</span>{{ item.price }}</p>
              </router-link>
            </div>
          </li>
        </ul>
      </van-tab>

      <van-tab>
        <template #title>
          <van-icon name="fire-o" color="#ee0a24" size="1.2rem" style="margin-right: 5px;" />热销 • 单品
        </template>
        <ul class="proul">
          <li v-for="item in hotProducts" :key="item.id">
            <div class="con">
              <router-link :to="{ path: '/product/base/detail', query: { id: item.id } }">
                <img :src="item.cover_cdn" />
                <p class="p1">
                  <van-tag type="danger">{{ item.flag_text }}</van-tag> {{ item.name }}
                </p>
                <p class="p2" style="color: red"><span>￥</span>{{ item.price }}</p>
              </router-link>
            </div>
          </li>
        </ul>
      </van-tab>
    </van-tabs>

    <Footer></Footer>

    <!-- <van-popup v-model:show="rightShow" position="right" :style="{ width: '50%' }" /> -->
    <van-popup v-model:show="rightShow" position="left" style="width: 80%;height: 100%;z-index: 9999;">
      <div class="top">
        <div class="cover">
          <img :src="user.cover_text" alt="用户背景" style="width: 100%;">
        </div>
        <div class="box">
          <div class="center">
            <van-image round width="6rem" height="6rem" :src="user.avatar_text" />
          </div>
          <div class="bottom">
            <p>{{ user.nickname }}</p>
            <p>{{ user.email }}</p>
          </div>
        </div>
      </div>

      <van-cell title="基本资料" is-link icon="description" to="/user/base/profile" />
      <van-cell title="邮箱认证" is-link icon="envelop-o" to="/user/base/email" />
      <van-cell title="我的订单" is-link icon="orders-o" to="/user/orders/orders" />
      <van-cell title="充值" is-link icon="after-sale" to="/user/base/pay" />
      <van-cell title="消费记录" is-link icon="balance-list-o" to="/user/base/record" />
      <van-cell title="关注公众号" is-link icon="miniprogram-o" to="/" />
      <!-- <van-cell title="退出" is-link @click="logout">
        <template #icon>
          <i class="fa fa-sign-out" aria-hidden="true"
            style="display: flex;align-items: center;margin: 0 3px;font-size: 16px;"></i>
        </template>
      </van-cell> -->
    </van-popup>

  </div>
</template>

<script>
import Navbar from "../components/Navbar.vue";
import Footer from "../components/Footer.vue";
export default {
  name: "Home",
  data() {
    return {
      typeList: [],
      user: '',
      rightShow: false,
      active: 'active',
      hotProducts: [],
      newProducts: [],
      tuiProducts: [],
      images: []
    };
  },
  methods: {
    toSearch() {
      this.$router.push('/product/base/search')
    },
    logout() {
      this.$dialog
        .confirm({
          title: "确认退出？",
          message: "您确认退出当前登录的账号",
        })
        .then(() => {
          this.$cookies.remove("ShopUser");

          this.$toast.loading({
            message: "退出中...",
            forbidClick: true,
            duration: 1500,
            onClose: () => {
              if (this.$cookies.isKey("ShopUser")) {
                this.$notify({
                  type: "warning",
                  message: "退出失败",
                });
                return false;
              }
              this.$notify({
                type: "success",
                message: "退出成功",
                duration: 1500,
                onClose: () => {
                  this.$router.push("/");
                },
              });
            },
          });
        })
        .catch(() => { });
    },
    async initType() {
      let res = await this.$api.initType();

      if (res.code === 1) {
        this.typeList = res.data;
      } else {
        this.$notify({
          type: "warning",
          message: "获取失败",
          onClose: () => {
            return false;
          },
        });
      }
    },
    async initProducts() {
      let res = await this.$api.initProducts();
      if (res.code === 1) {
        this.hotProducts = res.data.hotProducts;
        this.newProducts = res.data.newProducts;
        this.tuiProducts = res.data.tuiProducts;
        // console.log(this.hotProducts);
      } else {
        this.$notify({
          type: "warning",
          message: "获取失败",
          onClose: () => {
            return false;
          },
        });
      }
    },
    async initSwiper() {
      let res = await this.$api.initSwiper();
      if (res.code === 1) {
        this.images = res.data
      } else {
        this.$notify({
          type: "warning",
          message: "获取失败",
          onClose: () => {
            return false;
          },
        });
      }
    },
    handleRightShow() {
      if (this.user != '') {
        this.rightShow = true
      } else {
        this.$notify({
          type: "warning",
          message: "请先登录",
          duration: 1000,
          onClose: () => {
            this.$router.push('user/base/login')
          }
        })
      }
    }
  },
  components: {
    Footer,
    Navbar,
  },
  created() {
    this.user = this.$cookies.get("ShopUser")
      ? this.$cookies.get("ShopUser")
      : "";

    console.log(this.user);
    this.initSwiper();
    this.initType();
    this.initProducts();
    // let res = this.$api.initSwiper();
    // console.log(res);
  },
};
</script>

<style scoped>
.lqgwBox_items {
  /* width: 100%; */
  margin: .625rem;
  margin-bottom: .9375rem;
  padding: .625rem;
  border-radius: .625rem;
  background-color: #fff;
  box-shadow: 0 0 .9375rem #ccc;
}

.p1 {
  line-height: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left !important;
  padding: 0 8px 0px 5px;
  font-size: .875rem !important;
}

.p2 {
  color: red !important;
  padding-top: .3125rem;
}

ul.proul li .con p {
  height: auto;
  line-height: 20px;
}

.topBox {
  position: -webkit-sticky;
  position: sticky;
  max-width: 100% !important;
}

.top {
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  text-align: center;
  color: black;
}

.center {
  margin-bottom: 10px;
}

.bottom {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 10px;
}

.bottom p {
  margin: 5px 0;
}
</style>
